<template>
    <div class="home-box">
        <main class="home-main">
            <div class="white-box">
                <head-title title="待办事项"></head-title>
                <div class="home-one flexs">
                    <div class="one-item" v-for="(item, index) in oneArrs" :key="index" @click="toOrder(item, index)">
                        <el-image class="one-item-icon" :src="item.icon" fit="cover" />
                        <div class="one-item__right">
                            <p class="one-item__nums">{{ item.nums }}</p>
                            <p class="one-item__text">{{ item.text }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="white-box">
                <head-title title="店铺数据" :subtitle="'更新时间 ' + update_time"></head-title>
                <div class="home-two">
                    <div class="shop-one flexs">
                        <div class="shop-one__item" :style="{ backgroundImage: `url(${item.bg})` }" v-for="(item, index) in shopOnes" :key="index">
                            <p class="shop-one__text">{{ item.text }}</p>
                            <p class="shop-one__nums">{{ item.nums }}</p>
                        </div>
                    </div>

                    <div class="shop-two flexs">
                        <div class="shop-two__item" v-for="(item, index) in shopTwo" :key="index">
                            <el-image class="shop-two-icon" :src="item.icon" fit="cover" />
                            <div class="shop-two__right">
                                <p class="shop-two__text">{{ item.text }}</p>
                                <p class="shop-two__nums">
                                    {{ item.nums }}<span>{{ item.unit }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="white-box">
                <head-title title="商品数据"></head-title>
                <div class="shop-two flexs">
                    <div class="shop-two__item" v-for="(item, index) in goodArrs" :key="index">
                        <el-image class="shop-two-icon" :src="item.icon" fit="cover" />
                        <div class="shop-two__right">
                            <p class="shop-two__text">{{ item.text }}</p>
                            <p class="shop-two__nums">
                                {{ item.nums }}<span>{{ item.unit }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 30天订单数 -->
            <div class="white-box">
                <head-title title="近30天订单趋势图"></head-title>
                <div class="echars-one__cont">
                    <div id="echart-order" class="echart-view"></div>
                </div>
            </div>

            <!-- 15天会员趋势和本月会员图表 -->
            <div class="echars-one flexs">
                <div class="echars-one__item white-box">
                    <head-title title="15天会员趋势"></head-title>
                    <div class="echars-one__cont">
                        <div id="echart-vips" class="echart-view"></div>
                    </div>
                </div>
                <div class="echars-one__item white-box">
                    <head-title title="会员数据"></head-title>
                    <div class="pie-cont">
                        <div id="echart-user" class="echart-view"></div>
                    </div>
                </div>
            </div>
            <!-- 近30天PV/UV情况 -->
            <div class="white-box">
                <head-title title="近30天PV/UV情况"></head-title>
                <div class="echars-one__cont">
                    <div id="echart-pvuv" class="echart-view"></div>
                </div>
            </div>
        </main>
        <aside class="home-aside">
            <div class="white-box" style="padding: 20px 15px">
                <el-skeleton animated :rows="4" v-if="edition_skeleton" />
                <template v-if="!edition_skeleton">
                    <head-title :title="versions.version_title" title-size="16px" v-if="versions"></head-title>
                    <p class="home-edition">
                        <span :class="[versions.exp_date <= 0 ? 'expired-active' : '']"
                            >剩余<strong class="surplus-time"> {{ versions.exp_date <= 0 ? 0 : versions.exp_date }} </strong>天
                        </span>
                        <span class="edition-date">（{{ versions.exp_date <= 0 ? "已到期" : versions.end_at + "到期" }}）</span>
                    </p>
                    <div class="home-edition__foot">
                        <p v-if="versions.exp_date > 0">{{ versions.version_title }}</p>
                        <div v-else>
                            <p>当前为{{ versions.version_title }}本</p>
                            <p>升级解锁享受更多服务</p>
                        </div>
                        <p class="home-edition__btn">
                            <el-popover
                                placement="top"
                                content="您好，暂不支持线上升级，请联系您的服务经理进行升级处理。"
                                :width="280"
                                :persistent="false"
                                trigger="click"
                                v-if="versions.exp_date <= 0"
                            >
                                <template #reference>
                                    <el-button color="#ff5050">立即升级</el-button>
                                </template>
                            </el-popover>
                        </p>
                    </div>
                </template>
            </div>
            <!-- ad -->
            <div class="home-aside-ad">
                <el-image :src="home_ad" fit="cover" />
            </div>
            <div class="white-box" style="padding: 20px 15px">
                <head-title title="通知公告" title-size="14px" bottom="16px" text="更多" text-size="12px" @click="toNotice(15)" v-if="!notice_skeleton">
                </head-title>
                <div class="aside-ul">
                    <el-skeleton animated :rows="4" v-if="notice_skeleton" />
                    <template v-if="!notice_skeleton && notices.length > 0">
                        <div class="aside-li" v-for="item in notices" :key="item.article_id" @click="toNoticeDetail(item.article_id)">
                            <div class="aside-li__item flexs">
                                <p class="aside-li__left line-one">{{ item.title }}</p>
                                <span class="aside-li__right">{{ item.dates }}</span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="white-box" style="padding: 20px 15px">
                <head-title title="系统更新" title-size="14px" bottom="16px" text="更多" text-size="12px" @click="toNotice(16)" v-if="!notice_skeleton">
                </head-title>
                <div class="aside-ul">
                    <el-skeleton animated :rows="4" v-if="notice_skeleton" />
                    <template v-if="!notice_skeleton && sysgx.length > 0">
                        <div class="aside-li" v-for="item in sysgx" :key="item.article_id" @click="toNoticeDetail(item.article_id)">
                            <div class="aside-li__item flexs">
                                <p class="aside-li__left line-one">{{ item.title }}</p>
                                <span class="aside-li__right">{{ item.dates }}</span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="white-box" style="padding: 20px 15px">
                <head-title title="知识技能" title-size="14px" bottom="16px" text="更多" text-size="12px" @click="toNotice(17)" v-if="!notice_skeleton">
                </head-title>
                <div class="aside-ul">
                    <el-skeleton animated :rows="4" v-if="notice_skeleton" />
                    <template v-if="!notice_skeleton && knowArrs.length > 0">
                        <div class="aside-li" v-for="item in knowArrs" :key="item.article_id" @click="toNoticeDetail(item.article_id)">
                            <div class="aside-li__item flexs">
                                <p class="aside-li__left line-one">{{ item.title }}</p>
                                <span class="aside-li__right">{{ item.dates }}</span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 客服 -->
            <div class="white-box home-aside-serve" style="padding: 20px 15px">
                <el-image
                    class="aside-serve__img"
                    :src="proxy.imgUrl + 'tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230414_a38dac94c2b82d01a267fc00b6c1ba4d.png'"
                    fit="cover"
                />
                <div class="aside-serve__right">
                    <p class="aside-serve__title" style="margin-bottom: 4px">客服热线：0871-63177163</p>
                    <p class="aside-serve__title">投诉热线：18288786672</p>
                </div>
            </div>
        </aside>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, computed, onBeforeUnmount } from "vue"
import { useRouter } from "vue-router"
import { useBaseStore } from "@store/base"
import HeadTitle from "@components/HeadTitle.vue"
// echarts
import EchartsLine from "@common/echarts-line"
import EchartsPie from "@common/echarts-pie"

import i1 from "@images/icon1.png"
import i2 from "@images/icon2.png"
import i3 from "@images/icon3.png"
import i4 from "@images/icon4.png"
import i5 from "@images/icon5.png"
import i6 from "@images/icon6.png"
import i7 from "@images/icon7.png"
import i8 from "@images/icon8.png"
import i9 from "@images/icon9.png"
import i10 from "@images/icon10.png"
import i11 from "@images/icon11.png"
import i12 from "@images/icon12.png"
import i13 from "@images/icon13.png"
import i14 from "@images/icon14.png"
import i15 from "@images/icon15.png"
import i16 from "@images/icon16.png"
import i17 from "@images/icon17.png"

const router = useRouter()
const { proxy } = getCurrentInstance()

const storeBase = useBaseStore()
const navName = computed(() => {
    return storeBase.navName
})
const versions = computed(() => {
    return storeBase.versions || {}
})

onMounted(() => {
    getNewsClass()
    getCounts()
    window.onresize = echartResize
})

onBeforeUnmount(() => {
    echartsDispose()
    window.onresize = null
})

// 获取版本信息
const edition_skeleton = ref(false)

// 首页广告
const home_ad = ref("https://saas.huashushop.com/saas/img/ad1.jpg")

// 统计
const countObjs = ref({})
function getCounts() {
    proxy.$axios
        .get("http://192.168.1.170:3000/master/indexTongji.json")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                countObjs.value = result
                // 待办事项
                oneArrs.value[0].nums = result.wait_quality_count
                oneArrs.value[1].nums = result.wait_pack_count
                oneArrs.value[2].nums = result.wait_delivery_count
                oneArrs.value[3].nums = result.finish_order_count
                oneArrs.value[4].nums = result.waite_refund_count

                // 店铺数据
                shopOnes.value[0].nums = result.order_total_count
                shopOnes.value[1].nums = result.order_total_money
                shopOnes.value[2].nums = result.month_order_count
                shopOnes.value[3].nums = result.month_order_money
                shopTwo.value[0].nums = result.total_user_count
                shopTwo.value[1].nums = result.month_user_count
                shopTwo.value[2].nums = result.total_supplier_money
                shopTwo.value[3].nums = result.transfer_supplier_money

                // 供应商数
                goodArrs.value[0].nums = result.total_supplier_count
                goodArrs.value[1].nums = result.total_sku
                goodArrs.value[2].nums = result.total_on_sale
                goodArrs.value[3].nums = result.total_refund_count
                memberArr() // 会员饼图
                orderNums() // 30天订单数
                echartsUser() // 15天会员趋势
                pvAndUv() // UV/PV
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 待办事项
 */
const oneArrs = ref([
    {
        nums: 0,
        icon: i1,
        text: "待质检数",
        cur: 2,
        status: 2,
    },
    {
        nums: 0,
        icon: i2,
        text: "待打包数",
        cur: 4,
        status: 4,
    },
    {
        nums: 0,
        icon: i4,
        text: "待发货数",
        cur: 5,
        status: 5,
    },
    {
        nums: 0,
        icon: i3,
        text: "已完成数",
        cur: 8,
        status: 8,
    },
    {
        nums: 0,
        icon: i5,
        text: "待售后处理",
    },
])
const toOrder = (item, index) => {
    let nav_index = navName.value.findIndex((item) => item == "订单")
    nav_index = nav_index == -1 ? 0 : nav_index
    storeBase.setCur(nav_index)
    storeBase.setStyle(false)
    if (index < 4) {
        router.push({
            path: "/Order/OrderList",
            query: {
                cur: item.cur,
                status: item.status,
            },
        })
    } else {
        router.push("/Order/AfterSales")
    }
}

/**
 * 店铺数据
 * @param {Array} shopOnes 店铺第一组数据
 * @param {Array} shopTwo 店铺第二组数据
 */
const update_time = ref(proxy.$util.formatTime(new Date()))
const shopOnes = ref([
    {
        nums: 0,
        text: "总计订单(单)",
        bg: i6,
    },
    {
        nums: 0,
        text: "总计金额(元)",
        bg: i7,
    },
    {
        nums: 0,
        text: "本月订单(单)",
        bg: i8,
    },
    {
        nums: 0,
        text: "本月金额(元)",
        bg: i9,
    },
])
const shopTwo = ref([
    {
        nums: 0,
        icon: i10,
        text: "总会员数",
        unit: "个",
    },
    {
        nums: 0,
        icon: i11,
        text: "本月新增会员",
        unit: "个",
    },
    {
        nums: 0,
        icon: i12,
        text: "供应商余额",
        unit: "元",
    },
    {
        nums: 0,
        icon: i13,
        text: "供应商已提现",
        unit: "元",
    },
])

/**
 * 商品数据
 */
const goodArrs = ref([
    {
        nums: 0,
        icon: i14,
        text: "供应商数",
        unit: "个",
    },
    {
        nums: 0,
        icon: i15,
        text: "商品库数",
        unit: "个",
    },
    {
        nums: 0,
        icon: i16,
        text: "已上架商品数",
        unit: "个",
    },
    {
        nums: 0,
        icon: i17,
        text: "累计售后数",
        unit: "个",
    },
])

/**
 * 图表
 * @param {Object} chart_order_nums 订单数实例
 * @param {Object} chart_order_price 订单金额实例
 * @param {Object} chart_member 会员数实例
 * @param {Object} chart_pv UV/PV实例
 * @param {Function} echartResize 图表自适应窗口
 * @param {Function} echartsDispose 图表销毁
 */
let chart_order_nums = null
let chart_order_price = null
let chart_member = null
let chart_pv = null
function echartResize() {
    chart_order_nums != null && chart_order_nums.resize()
    chart_order_price != null && chart_order_price.resize()
    chart_member != null && chart_member.resize()
    chart_pv != null && chart_pv.resize()
}
function echartsDispose() {
    chart_order_nums != null && chart_order_nums.dispose()
    chart_order_price != null && chart_order_price.dispose()
    chart_member != null && chart_member.dispose()
    chart_pv != null && chart_pv.dispose()
    chart_order_nums = null
    chart_order_price = null
    chart_member = null
    chart_pv = null
}

/**
 * 30天订单数据-折线图
 * @param {Function} orderNums 订单数据
 * @param {Function} orderPrice 订单金额
 */
function orderNums() {
    chart_order_nums = proxy.$echarts.init(document.getElementById("echart-order"))
    let orders = [],
        goods = [],
        xData = []
    proxy.$axios
        .get("http://192.168.1.170:3000/master/indexOrder.json")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.flower_items
                result.map((item) => {
                    orders.push(item.money)
                    goods.push(item.product_number)
                    xData.push(item.date)
                })
                // 设置配置项
                let series = [
                    {
                        data: orders,
                        type: "line",
                        name: "订单金额",
                        smooth: true,
                        showSymbol: true,
                        areaStyle: {
                            opacity: 1,
                            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(64, 158, 255,0.8)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(255, 255, 255, 0.3)",
                                },
                            ]),
                        },
                    },
                    {
                        data: goods,
                        type: "line",
                        name: "商品数",
                        smooth: true,
                        showSymbol: true,
                        areaStyle: {
                            opacity: 1,
                            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(255, 155, 44,0.8)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(255, 255, 255, 0.3)",
                                },
                            ]),
                        },
                    },
                ]
                let legend = ["订单金额", "商品数"]
                let option = EchartsLine(xData, legend, series)
                chart_order_nums.setOption(option)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 15天会员趋势
function echartsUser() {
    chart_order_price = proxy.$echarts.init(document.getElementById("echart-vips"))
    let nums = [],
        xData = []
    proxy.$axios
        .get("http://192.168.1.170:3000/master/indexUser.json")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.user_items
                result.map((item) => {
                    nums.push(item.user_num)
                    xData.push(proxy.$util.dislodgeZero(item.date))
                })
                let series = [
                    {
                        data: nums,
                        type: "line",
                        name: "会员数",
                        smooth: true,
                    },
                ]
                let legend = ["会员数"]
                let option = EchartsLine(xData, legend, series)
                chart_order_price.setOption(option)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 会员数据-饼图
 */
function memberArr() {
    chart_member = proxy.$echarts.init(document.getElementById("echart-user"))
    let series = [
        {
            name: "会员数据",
            type: "pie",
            radius: "50%",
            selectedMode: "single", // 单选
            data: [
                {
                    value: countObjs.value.month_user_count,
                    name: "本月新增会员",
                    selected: true,
                },
                {
                    value: countObjs.value.total_user_count,
                    name: "总会员数",
                },
            ],
            label: {
                formatter: "{b}: {c}个",
                fontSize: 14,
            },
        },
    ]
    let option = EchartsPie(series, "{b}：{c}<br />占比: {d}%")
    chart_member.setOption(option)
}

/**
 * PV/UV
 */
function pvAndUv() {
    chart_pv = proxy.$echarts.init(document.getElementById("echart-pvuv"))
    let uvs = [],
        pvs = [],
        xData = []
    proxy.$axios
        .get("http://192.168.1.170:3000/master/indexView.json")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.view_items
                result.map((item) => {
                    pvs.push(item.pv_count)
                    uvs.push(item.uv_count)
                    xData.push(item.date)
                })
                let series = [
                    {
                        data: uvs,
                        type: "line",
                        name: "UV",
                        smooth: true, // 是否平滑曲线显示。
                        showSymbol: true, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
                        areaStyle: {
                            opacity: 1,
                            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(64, 158, 255,0.8)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(255, 255, 255, 0.3)",
                                },
                            ]),
                        },
                    },
                    {
                        data: pvs,
                        type: "line",
                        name: "PV",
                        smooth: true,
                        showSymbol: true,
                        areaStyle: {
                            opacity: 1,
                            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "rgba(255, 155, 44,0.8)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(255, 255, 255, 0.3)",
                                },
                            ]),
                        },
                    },
                ]
                let legend = ["UV", "PV"]
                let option = EchartsLine(xData, legend, series)
                chart_pv.setOption(option)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 公告
 */
const notices = ref([]) // 系统通知
const notice_skeleton = ref(true)
const sysgx = ref([]) // 系统更新
const knowArrs = ref([]) // 知识技能
function getNewsClass() {
    proxy.$axios
        .get("http://192.168.1.170:3000/master/sysSrticleCate.json")
        .then((res) => {
            if (res.data.code == 0) {
                // let result = res.data.data
                getNews(15)
                getNews(16)
                getNews(17)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
function getNews(id) {
    proxy.$axios
        .get("http://192.168.1.170:3000/master/sysArticleIndex.json", {
            params: {
                cate_id: id,
                page: 1,
                limit: 10,
            },
        })
        .then((res) => {
            notice_skeleton.value = false
            if (res.data.code == 0) {
                let result = res.data.data
                result.map((item) => {
                    let days = proxy.$util.splitDate(item.on_time_lable).substring(5)
                    item.dates = days
                })
                if (id == 15) {
                    notices.value = result
                } else if (id == 16) {
                    sysgx.value = result
                } else {
                    knowArrs.value = result
                }
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            notice_skeleton.value = false
        })
}
const toNoticeDetail = (id) => {
    storeBase.setCur(null)
    storeBase.setStyle(true)
    router.push({
        path: "/HelpDetail",
        query: {
            id,
        },
    })
}
const toNotice = (cate_id) => {
    storeBase.setCur(null)
    storeBase.setStyle(true)
    router.push({
        path: "/Help",
        query: {
            cate_id,
        },
    })
}
</script>

<script>
export default {
    name: "Home",
}
</script>

<style lang="less" scoped>
.home-aside-serve {
    display: flex;
    align-items: center;

    .aside-serve__img {
        flex: none;
        width: 46px;
        margin-right: @margin-sm;
    }

    .aside-serve__right {
        flex: 1;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;

        .aside-serve__title {
            width: 100%;
            flex: none;
            font-size: 14px;
            color: #000;
        }
    }
}

.home-aside-ad {
    border-radius: @radius-xs;
    width: 100%;
    display: flex;
    margin-bottom: 18px;
}

.home-edition {
    font-size: @font-size-md;
    color: @gray-8;

    .surplus-time {
        font-size: 20px;
        padding: 0px @padding-base;
    }

    .expired-active {
        color: #ff5050;
    }

    .edition-date {
        font-size: 13px;
        color: @gray-6;
    }
}

.home-edition__foot {
    margin-top: @padding-mdl;
    font-size: @font-size-md;
    color: @gray-6;

    .home-edition__btn {
        width: 100%;
        margin-top: @margin-md;

        .el-button {
            width: 100%;
            color: #fff;
            font-weight: bold;
            height: 38px;
            font-size: @font-size-lg;
            letter-spacing: 1px;
        }
    }
}

.echars-one {
    margin-bottom: @margin-mdl;

    .echars-one__item {
        flex: none;
        width: 49.4%;
        margin-bottom: 0;
    }
}

.echart-view {
    width: 100%;
    height: 340px;
}

.home-one {
    width: 100%;

    .one-item {
        flex: none;
        display: flex;
        width: 20%;
        padding: @padding-sm;
        cursor: pointer;

        &:hover {
            background-color: @gray-1;
        }

        .one-item-icon {
            flex: none;
            width: 54px;
            height: 54px;
            margin-right: @margin-sm;
        }

        .one-item__right {
            flex: 1;

            .one-item__nums {
                font-size: 28px;
                color: @gray-8;
                font-weight: bold;
            }

            .one-item__text {
                font-size: @font-size-md;
                color: @gray-6;
            }
        }
    }
}

.shop-one {
    margin-bottom: @margin-xl;

    .shop-one__item {
        flex: none;
        width: 24%;
        border-radius: @radius-md;
        padding: 34px 0px 0px 50px;
        color: #fff;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 130px;
        overflow: hidden;

        &:last-child {
            margin-right: 0;
        }

        .shop-one__text {
            font-size: @font-size-md;
            margin-bottom: @margin-sm;
        }

        .shop-one__nums {
            font-size: 28px;
        }
    }
}

.shop-two {
    .shop-two__item {
        flex: none;
        width: 24%;
        display: flex;
        // cursor: pointer;
        padding: @padding-md @padding-md @padding-md 40px;

        .shop-two-icon {
            flex: none;
            width: 50px;
            height: 50px;
            margin-right: @margin-sm;
        }

        .shop-two__right {
            flex: 1;
        }

        .shop-two__nums {
            font-size: 26px;
            color: @gray-8;

            span {
                font-size: @font-size-md;
                color: @gray-6;
                margin-left: @margin-base;
            }
        }

        .shop-two__text {
            font-size: @font-size-md;
            color: @gray-6;
            margin-bottom: @margin-base;
        }
    }
}

.home-box {
    display: flex;
    width: 100%;
}

.home-main {
    flex: 1;
    padding: 0 18px 0 0;
}

.home-aside {
    flex: none;
    width: 260px;

    .aside-ul {
        overflow: hidden;
    }

    .aside-li {
        cursor: pointer;
        font-size: @font-size-sm;
        display: flex;
        align-items: center;
        height: 28px;
        color: @gray-8;
        overflow: hidden;

        .aside-li__item {
            width: 100%;
            overflow: hidden;

            .aside-li__left {
                flex: 1;
                margin-right: @margin-xs;
            }

            .aside-li__right {
                flex: none;
            }
        }

        &:hover {
            color: @themes;
        }
    }
}
</style>
